<template>
    <div class="wrapper">
        <header>

        <!-- 跳转设置 -->
        <li @click="goToSetmeal">
            <img class="icon" :src="'src/img/left.png'" alt="返回图标"> 
        </li>


            <i class="fa fa-angle-left" @click="previousMonth"></i>
            <p>选择体检日期</p>
            <div></div>
        </header>
        <div class="top-ban"></div>

        <section>
            <div class="date-box">
                <i class="fa fa-caret-up" @click="adjustYear(-1)">《</i>
                <i class="fa fa-caret-left" @click="adjustMonth(-1)"><</i>

                <p>{{ year }}年{{ month }}月</p>
                <i class="fa fa-caret-right" @click="adjustMonth(1)">></i>
                <i class="fa fa-caret-down" @click="adjustYear(1)">》</i>
            </div>
            <table>
                <tr>
                    <th>日</th>
                    <th>一</th>
                    <th>二</th>
                    <th>三</th>
                    <th>四</th>
                    <th>五</th>
                    <th>六</th>
                </tr>
                <tr v-for="week in calendar" :key="week">
                    <td
    v-for="day in week"
    :key="day.ymd"
    :class="{
        'disabled': !day.remainder, // 确保只有remainder不为空的日期可以被点击
        'fontcolor': day.remainder === '',
        'orange-bg': day.selected && day.remainder, // 日期被选中且remainder不为空时，应用橙色背景
        'selectable': day.remainder > 0
    }"
    @click="selectDate(day.ymd, day.remainder)"
>
                        <div v-if="day.remainder" class="circle">{{ day.ymd && day.ymd.split('-')[2] || '' }}</div>
                        <div v-else class="circle gray">{{ day.ymd && day.ymd.split('-')[2] || '' }}</div>
                        <p v-if="day.remainder" :class="day === calendarData.find(d => d.remainder) ? 'first-remainder' : ''">
                            {{ '余' + day.remainder }}
                        </p>
                    </td>
                </tr>
            </table>
        </section>

        <div class="bottom-btn">
            <div></div>
            <div @click="goToNextStep">下一步</div>
        </div>

        <div class="bottom-ban"></div>
        <Footer></Footer>
    </div>
</template>

<script>
import Footer from '@/components/Footer.vue'
import { useRouter } from 'vue-router';
import { getSessionStorageItem, setSessionStorage } from '../common.js'; // 导入 setSessionStorage

export default {
    data() {
        const currentDate = new Date();
    const tomorrowDate = new Date(currentDate);
    tomorrowDate.setDate(currentDate.getDate() + 1); // 获取明天的日期

    return {
        year: currentDate.getFullYear(),
        month: currentDate.getMonth() + 1,
        calendarData: [
            {
                ymd: tomorrowDate.toISOString().slice(0, 10), // 将日期格式化为 'YYYY-MM-DD'
                selected: true // 设置明天的日期为默认选中状态
            }
            // 其他日期数据
        ]
    };
    },
    computed: {
        calendar() {
            // Generate calendar based on calendarData
            const calendar = [];
            const weeks = Math.ceil(this.calendarData.length / 7);
            for (let i = 0; i < weeks; i++) {
                calendar.push(this.calendarData.slice(i * 7, (i + 1) * 7));
            }
            return calendar;
        }
    },
    methods: {
        fetchCalendarData() {
            const url = 'http://localhost:8080/calendar/list';
            const requestData = {
                hpId: 1,
                year: this.year,
                month: this.month
            };

            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(requestData),
            })
                .then(response => response.json())
                .then(data => {
                    // Modify calendarData to include ymd for each day
                    this.calendarData = data.map(item => {
                        return {
                            ...item,
                            ymd: item.ymd
                        };
                    });
                })
                .catch(error => {
                    console.error('获取日历数据时发生错误:', error);
                });
        },
        adjustYear(delta) {
            this.year += delta;
            this.fetchCalendarData(); // 更新年份后重新获取数据
        },

        adjustMonth(delta) {
            this.month += delta;
            if (this.month < 1) {
                this.year--;
                this.month = 12;
            } else if (this.month > 12) {
                this.year++;
                this.month = 1;
            }
            this.fetchCalendarData(); // 更新月份后重新获取数据
        },
        isTomorrow(ymd) {
            const tomorrow = new Date();
            tomorrow.setDate(tomorrow.getDate() + 1);
            const tomorrowStr = tomorrow.toISOString().split('T')[0]; // Format: YYYY-MM-DD
            return ymd === tomorrowStr;
        },
        previousMonth() {
            // Implement previous month logic
        },
        goToNextStep() {
            this.$router.push('/confirmorder');

        },
        goToSetmeal(){
            this.$router.push('/setmeal');
        },

        selectDate(ymd, remainder) {
        if (remainder) { // 确保只有remainder不为空的日期可以被选中
            console.log('选中日期:', ymd);
            setSessionStorage('selectedDate', ymd); // 将选中日期保存到 sessionStorage
            
            // 更新 calendarData 以标记选中的日期，同时清除其他日期的选中状态
            this.calendarData.forEach(day => {
                day.selected = day.ymd === ymd;
            });
        }
    },
    },
    components: {
        Footer
    },
    mounted() {
        this.fetchCalendarData();
    }
};
</script>




<style scoped>
/* 返回 */
header li {
list-style-type: none;
}
.icon{
float: left;

width: 80%;
height: 8.2vw;
}




.orange-bg {
    background-color: orange; /* 设置背景颜色为橙色 */
}
.wrapper {
    width: 100%;
    height: 100%;
    background-color: #F9F9F9;
}

header {
    width: 100%;
    height: 15.7vw;
    background-color: #FFF;
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 3.6vw;
}
header .fa {
    font-size: 8vw;
}

footer {
    width: 100%;
    height: 14.2vw;
    box-sizing: border-box;
    border-top: solid 1px #E9E9E9;
    background-color: #FFF;
    position: fixed;
    left: 0;
    bottom: 0;
}
footer ul {
    width: 100%;
    height: 14.2vw;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
footer ul li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 3vw;
    color: #999;
    user-select: none;
    cursor: pointer;
}
footer ul li .fa {
    font-size: 5vw;
}

.top-ban, .bottom-ban {
    width: 100%;
    height: 15.7vw;
}

section {
    width: 82vw;
    margin: 0 auto;
    margin-top: 12vw;
}
section .date-box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 4.5vw;
    font-weight: 600;
}
section .date-box p {
    color: #000;
}
section .date-box i {
    color: #999;
    user-select: none;
    cursor: pointer;
}
section table {
    width: 100%;
    font-size: 3.8vw;
}
section table tr th {
    text-align: center;
    font-weight: 600;
    line-height: 12vw;
}
section table tr td {
    text-align: center;
    position: relative;
}
section table .circle {
    display: inline-block;
    width: 6vw;
    height: 6vw;
    line-height: 6vw;
    border-radius: 50%;
    margin: 0.5vw;
}
section table .circle.gray {
    background-color: #E9E9E9;
    color: #CCC;
}
section table .circle.pselect {
    background-color: #FB902B;
    color: #FFF;
}
/* section table .first-remainder {
    background-color: #FB902B;
    color: #FFF;
} */

.bottom-btn {
    width: 100%;
    height: 12vw;
    background-color: #FFF;
    position: fixed;
    left: 0;
    bottom: 14.2vw;
    display: flex;
}
.bottom-btn div:first-child {
    flex: 2;
}
.bottom-btn div:last-child {
    flex: 1;
    background-color: #117C94;
    text-align: center;
    line-height: 12vw;
    font-size: 5vw;
    color: #FFF;
    user-select: none;
    cursor: pointer;
}
</style>